<script>
import Header from "./components/Header.vue";
import CenterOverview from "./components/CenterOverview.vue";
import YearSelect from "./components/YearSelect.vue";
// 主页展示
import HomeClue from "./views/HomeClue.vue";
import HomeRegister from "./views/HomeRegister.vue";
import MapContainer from "./components/MapContainer.vue";
import { getStyle } from "./utils/index";
export default {
  components: {
    Header,
    HomeClue,
    HomeRegister,
    MapContainer,
    CenterOverview,
    YearSelect,
  },
  data() {
    return {
      year: new Date().getFullYear(),
      style: {
        width: "460",
        height: "960",
      },
      hideenRight: false,
      hiddenLeft: false,
    };
  },
  mounted() {
    this.getComputedStyle();
    window.addEventListener("resize", this.getComputedStyle);
  },
  methods: {
    getComputedStyle() {
      const { width, height } = getStyle();
      this.style.width = width;
      this.style.height = height;
    },
  },
};
</script>

<template>
  <div class="big-screen">
    <!-- 头部 -->
    <Header />
    <!-- 中间 -->
    <div class="big-screen-center">
      <CenterOverview :year="year" />
    </div>
    <div class="big-screen-year">
      <YearSelect v-model="year" />
    </div>
    <!-- 地图模块 -->
    <div class="map">
      <MapContainer :year="year" />
    </div>
    <!-- 首页展示 -->
    <div
      class="big-screen-left"
      :style="{ left: hideenRight ? `-${style.width + 5}px` : '20px' }"
      :class="{ 'show-container-left': true }"
    >
      <img
        v-if="hideenRight"
        src="./assets/images/common/back-left.png"
        class="big-screen-back-img big-screen-back-img-right"
        @click="hideenRight = !hideenRight"
      />
      <img
        v-if="!hideenRight"
        src="./assets/images/common/back-right.png"
        class="big-screen-back-img big-screen-back-img-right"
        @click="hideenRight = !hideenRight"
      />
      <HomeClue :year="year" />
    </div>
    <div
      class="big-screen-right"
      :style="{ right: hiddenLeft ? `-${style.width + 5}px` : '20px' }"
      :class="{ 'show-container-right': true }"
    >
      <img
        v-if="hiddenLeft"
        src="./assets/images/common/back-right.png"
        class="big-screen-back-img big-screen-back-img-left"
        @click="hiddenLeft = !hiddenLeft"
      />
      <img
        v-if="!hiddenLeft"
        src="./assets/images/common/back-left.png"
        class="big-screen-back-img big-screen-back-img-left"
        @click="hiddenLeft = !hiddenLeft"
      />
      <HomeRegister :year="year" />
    </div>
  </div>
</template>
<style lang="scss" src="./assets/css/index.scss"></style>
<style lang="scss" scoped>
#big-screen-map {
  width: 100%;
  height: 100%;
}
.big-screen {
  font-family: PingFang SC;
  font-weight: 400;
  // position: relative;
  overflow: hidden;
  height: 100%;
  min-height: 1080px;
  .big-screen-back-img {
    width: 25px;
    height: 35px;
    position: absolute;
    top: 50%;
    transform: translate(0%, -50%);
    cursor: pointer;
  }
  .big-screen-back-img-right {
    right: -40px;
  }
  .big-screen-back-img-left {
    left: -40px;
  }
  &-year {
    position: absolute;
    z-index: 6;
    left: 550px;
    transform: translate(-50%, 0%);
    display: flex;
    justify-content: center;
    top: 255px;
  }
  &-center {
    position: absolute;
    z-index: 5;
    left: 50%;
    transform: translate(-50%, 0%);
    display: flex;
    justify-content: center;
    top: 115px;
  }
  &-header {
    width: 100%;
    height: 96px;
  }
  &-left {
    display: flex;
    gap: 20px;
    flex-direction: column;
    box-sizing: border-box;
    position: absolute;
    z-index: 5;
    transition: left 1s;
    top: 96px;
    left: -600px;
  }
  &-right {
    display: flex;
    gap: 20px;
    flex-direction: column;
    box-sizing: border-box;
    position: absolute;
    z-index: 5;
    top: 96px;
    transition: right 1s;
    right: -600px;
  }
  .show-container-left {
    left: 20px;
  }

  .show-container-right {
    right: 20px;
  }
  .map {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    min-height: 1080px;
  }
}
</style>
<style lang="scss">
.site-screen-form-label {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  width: 85px;
  text-align: right;
}
.site-screen-form-content {
  font-size: 14px;
  color: #ffffff;
}
.site-screen-select .el-input__wrapper {
  height: 32px;
  background: linear-gradient(
    180deg,
    rgba(22, 31, 45, 0.45),
    rgba(23, 32, 45, 0.5)
  );
  border: 1px solid;
  border-image: linear-gradient(
      0deg,
      rgba(27, 36, 45, 0.46),
      rgba(255, 255, 255, 0.46)
    )
    1 1;
  box-shadow: 0px 13px 15px 1px rgba(0, 0, 0, 0.15);
}
.site-screen-select .el-input__inner {
  color: #fff;
}
.site-screen-top-form-btn {
  background: linear-gradient(
    180deg,
    rgba(22, 31, 45, 0.45),
    rgba(23, 32, 45, 0.5)
  );
  border: 1px solid;
  border-image: linear-gradient(
      0deg,
      rgba(27, 36, 45, 0.46),
      rgba(255, 255, 255, 0.46)
    )
    1 1;
  box-shadow: 0px 13px 15px 1px rgba(0, 0, 0, 0.15);
  width: 118px;
  height: 36px;
  border-radius: 4px 4px 4px 4px;
  opacity: 1;
  font-size: 14px;
  font-weight: 400;
  color: #ffffff;
  line-height: 31px;
  text-align: center;
  cursor: pointer;
  margin-left: 12px;
  font-size: 14px;
}
.home-site-data-paifang-info-text {
  font-size: 24px;
  color: #ffffff;
  background: linear-gradient(0deg, #3cffe9 10%, #fff 66%);
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
}
.home-site-data-paifang-info-text2 {
  font-size: 24px;
  color: #ffffff;
  background: linear-gradient(0deg, #ffb400 10%, #fff 66%);
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
}
</style>
./views/HomeSite.vue
